<template>
  <header>
    <div class="logo">
      <i class="iconfont">&#xe6ad;</i>
    </div>
    <ul class="navbar" v-if="data">
      <li v-for="item in data">
        <router-link :to="item.path"><i class="iconfont" :class="item.icon"></i> {{ item.title }}</router-link>
      </li>
<!--      <li>-->
<!--        <router-link to="/inherentRisk/clientRisk"><i class="iconfont">&#xe70c;</i> 客户风险</router-link>-->
<!--      </li>-->
<!--      <li><a href="javascript:void(0)"><i class="iconfont">&#xe62e;</i> 产品业务</a></li>-->
<!--      <li><a href="javascript:void(0)"><i class="iconfont">&#xe63a;</i> 渠道风险</a></li>-->
    </ul>
    <div class="user-box">
      <a href="/index" v-if="isBack">
        <span>引导页</span>
      </a>
      <a href="javascript:void(0)">
        <span>柯涛</span>
      </a>
      <router-link to="/" href="javascript:void(0)">
        <i class="iconfont">&#xe69b;</i>
        <span>退出</span>
      </router-link>
    </div>
  </header>
</template>

<script>
import {reactive} from "vue";

export default {
  name: "Header",
  props: ['data','isBack'],
  setup(props) {
    const menuList = reactive([]);
    console.log(props);
    props.data = [];
    props.isBack = false;
    return {
      menuList
    }
  }
}
</script>

<style lang="scss" scoped>
.router-link-exact-active {
  background-color: #3a8ee6;
  transform: scale(1.1);
  color: #fff;
  border-radius: 3px;
}

header {
  background: rgba(8, 28, 71, .8);
  padding: 10px;
  border-bottom: 2px solid #042241;
  box-shadow: 0 0 3px #2064aa inset;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .logo {
    height: 60px;
    display: flex;
    align-items: center;

    .iconfont {
      font-size: 170px;
      color: #3a8ee6;
    }
  }

  .navbar {
    display: flex;
    list-style: none;

    li {
      border: 1px solid #3a8ee6;
      border-radius: 3px;
      margin-left: 20px;
      transition: all .3s;
      box-sizing: border-box;

      a {
        text-decoration: none;
        color: #f5f5f5;
        display: block;
        padding: 8px 15px;
        transition: all .3s;

        &:hover, &.active {
          background-color: #3a8ee6;
          transform: scale(1.1);
          color: #fff;
          border-radius: 3px;
        }
      }

    }
  }

  .user-box {
    a {
      color: #f5f5f5;
      text-decoration: none;
      margin-left: 10px;
    }
  }
}
</style>